<template>
  <div class="html1_3">
      <h1>1.3  网页表单和控件</h1>
      <div class="html1_3_1">
        <h2>1.3.1  表单标签&lt;form></h2>
        <p>
          <pre>
            表单（Form）用于从用户（站点访问点）收集信息，然后将这些信息提交给服务器进行处理，并将处理后的结果返回，常用于实现动态网页中的内容交互。表单的使用包含两个部分：一是用户界面，提供用户输入数据的元件；二是处理程序，可以是客户端程序，在浏览器中执行，也可以是服务器处理程序，处理用户提交的数据，返回结果。例如，网页中常见的用户登录、用户注册、信息查询等。表单中可以包含允许用户进行交互的各种控件，例如文本框、列表框、复选框和单选按钮等。用户在表单中输入或选择数据之后将其选择提交，该数据就会送交给表单处理程序进行处理。
【语法】
&lt;form action="表单的处理程序" method="传送方式" target=”窗口的位置 ” enctype=”编码方式” >
&lt;!--表单控件-->
    ...
&lt;/form>
【说明】
通过action属性，可以指定表单的处理程序，这可以是程序或脚本的一个完整URL。
通过method属性，可以定义处理程序从表单中获取信息的方式，它决定了表单中已收集的数据用什么方法发送到服务器。传送方式的取值有两种，即get或post。当使用get时，表单数据会附加在URL之后，由客户端直接发送至服务器，因此速度比post快，但缺点是数据长度有限制，且保密性差，信用卡号或其他机密信息时，不要使用get方法，而应使用post方法。当使用post时，表单数据和URL是分开发送的，客户端的计算机会通知服务器来读取数据，因此通常没有数据长度上的限制。在没有指定method值的情况下，默认为get。若要使用get方法发送，URL的长度应限制在8192个字符内。如果发送的数据量太大，数据将被截断，从而导致意外的或失败的处理结果。
Target=目标窗口。其取值如下：_blank,在未命名的新窗口中打开目标文档；_parent，在当前文档窗口的父窗口中打开目标文档；_self，在提交表单所使用的窗口中打开目标文档；_top，在当前窗口中内打开目标文档，确保目标文档占用整个窗口。
enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。Enctype有3个取值：application/x-www-form-urlencoded，multipart/form-data和text/plain。
默认地，表单数据会编码为 "application/x-www-form-urlencoded"。就是说，在发送到服务器之前，所有字符都会进行编码（空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值）。
multipart/form-data，不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
text/plain，空格转换为 "+" 加号，但不对特殊字符编码。
在一个网页中可以创建多个表单，每个表单都可以包含各种各样的控件，例如文本框、单选按钮、复选框、下拉菜单以及按钮等。
【例2.22】
&lt;form action="form_action.asp" method="post" target=” ” >
用户名：&lt;input type="text" name="user" />&lt;br />
密 码： &lt;input type="password" name="password" />&lt;br />
&lt;input type="submit" value="确定" />
&lt;/form>
          </pre>
        </p>
        <img src="../assets/images/2.18.png" alt="">
        <p>图2.22  表单实例</p>
      </div>
      <div class="html1_3_2">
        <h2>1.3.2  表单</h2>
        <p>
          <pre>
在网页表单中，输入类的控件一般以&lt;input>标签开始，说明这一控件需要用户的输入。&lt;input>标签是最常用的控件标签，包括最常见的文本框、提交按钮等都采用这个标签。而菜单列表类控件则以&lt;select>开始，表示需要用户选择。除此之外，还有一些其他控件，它们有自己的特定标签，如文本域标签&lt;textarea>。
【语法】
&lt;input name="控件名称" type="控件类型" />
【说明】
通过name属性，可以指定控件名称，便于程序对不同控件的区分。
通过type属性，可以定义控件类型。type属性的取值有多种，如表2-6所示。
          </pre>
        </p>
        <p class="tab">表2-6  type值与其对应的含义</p>
        <table border="1px">
          <tr>
            <th>type值</th>
            <th>含义</th>
          </tr>
          <tr>
            <td>text</td>
            <td>文本框</td>
          </tr>
          <tr>
            <td>password</td>
            <td>密码框，用户在页面中输入时不显示具体内容，都以“*”代替</td>
          </tr>
          <tr>
            <td>radio</td>
            <td>单选按钮</td>
          </tr>
          <tr>
            <td>checkbox</td>
            <td>复选框</td>
          </tr>
          <tr>
            <td>button</td>
            <td>普通按钮</td>
          </tr>
          <tr>
            <td>submit</td>
            <td>提交按钮</td>
          </tr>
          <tr>
            <td>reset</td>
            <td>重置按钮</td>
          </tr>
          <tr>
            <td>image</td>
            <td>图像域，也称为图像提交按钮</td>
          </tr>
          <tr>
            <td>hidden</td>
            <td>隐藏域，其并不显示在页面上，只将内容传递到服务器中</td>
          </tr>
          <tr>
            <td>file</td>
            <td>文件域</td>
          </tr>
        </table>
        <p>
          <pre>
            下面简要介绍几种常用的表单控件。
1. 文本框和密码框
当用户要在表单中键入字母、数字等内容时，就会用到文本框。
【语法】
&lt;Input Type=”text” 属性=”值”…事件=”代码”…>
文本框的主要属性：
Name=单行文本框的名称，通过它可以在脚本中引用该文本框控件；
Value=文本框的值；
DefaultValue=文本框的初始值；
Size=文本框的宽度（字符数）；
MaxLength=允许在文本框内输入的最大字符数。
用户输入的字符数可以超过文本框的宽度，这时系统会将其滚动显示，但输入的字符数不能超过设置的最大字符数。当type=”password”时，用户输入的文本以*呈现，用于输入用户密码
文本框的主要方法：
Click（），单击该文本框；
Focus（），得到焦点；
Blur(),失去焦点；
Select（），选择文本框的内容
文本框的主要事件：
OnClick=单击该文本框执行的代码；
OnBlur=失去焦点执行的代码；
OnChange=内容变化执行的代码；
OnFocus=得到焦点执行的代码；
OnSelect=选择内容执行的代码。
【示例】
&lt;input type="text" name="URL" size="20" maxlength="50" value="http://" />
&lt;input type="password" name="password" size="20" maxlength="8" />
          </pre>
        </p>
        <img src="../assets/images/2.19.png" alt="">
        <p>图2.32  文本框和密码框实例</p>
        <p>
          <pre>
            2.普通按钮、提交按钮、复位按钮
使用Input标记可以在表单中添加3种类型的按钮：提交按钮、重置按钮和自定义按钮。创建按钮的方法如下：&lt;Input Type=”submit|reset|button” 属性=”值”…OncClick=”代码”>
按钮的主要属性：
Type=submit 创建一个提交按钮。在表单中添加提交按钮后，站点访问者就可以在提交表单时，将表单数据（包括提交按钮的名称和值）以ASCII文本形式传送到由表单的Action属性指定的表单处理程序。一般来说，表单中必须有一个提交按钮。
Type=reset创建一个重置按钮。单击该按钮时，将删除任何已经输入到域中的文本并清除所做的任何选择。但是，如果框中含有默认文本或选项为默认，单击重置按钮将会恢复这些设置值。
Type=button创建一个自定义按钮。在表单中添加自定义按钮时，为了赋予按钮某种操作，必须为该按钮编写脚本。
Name=按钮的名称
Value=显示在按钮上的标题文本
按钮的主要事件：
     OnClick=单击按钮执行的脚本代码
 【示例】
<!--在页面中添加一个普通按钮-->
&lt;input type="button" value="普通按钮" name="buttom1" />
<!--在页面中添加一个关闭当前窗口的按钮-->
&lt;input type="button" value="关闭当前窗口" name="close" onclick="window.close()" />
<!--在页面中添加一个打开新窗口的按钮-->
&lt;input type="button" value="打开新窗口" name="opennew" onclick="window.open()" />
          </pre>
        </p>
          <video src="../assets/h5实例视频/普通按钮.mp4" width="600px" controls></video>
          <p>
            <pre>
              3. 单选按钮
在表单中添加选项按钮可以让站点访问者从一组选项中选择其中之一。在一组单选按钮中，一次只能选择一个。创建选项按钮的方法如下：
【语法】
&lt;Input Type=”radio”属性=”值”...事件=”代码”...>选项文本
单选按钮的主要属性：
Name=单选按钮的名称，若干个名称相同的单选按钮构成一个控件组，在该组中只能选中一个选项；
Value=提交时的值；
Checked，设置当第一次打开表单时该单选按钮处于选中状态；该属性值是可选的。
当提交表单时，该单选按钮组名称和所选取的单选按钮指定值都会包含在表单结果中，如果没有任何单选按钮被选取，组名称会被纳入表单结果中，值则为空白。
【示例】
&lt;Input Type=radio Checked Name=kd Value=”教师”>教师
&lt;Input Type=radio Name =kd Value=”学生”>学生
&lt;Input Type= radio Name=kd Value=”公务员”>公务员
&lt;Input Type= radio Name=kd Value=”医生”>医生
            </pre>
          </p>
          <video src="../assets/h5实例视频/单选按钮.mp4" width="600px" controls></video>
          <img src="../assets/images/2.20.png" alt="">
        <p>图2.32  单选按钮实例</p>
        <p>
          <pre>
            4.复选框
当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。
【语法】
&lt;Input Type=”checkbox” 属性 = “值”...事件=”代码”...>选项文本
复选框的主要属性：
Name=复选框的名称
Value=选中时提交的值
Checked，设置当第一次打开表单时该复选框处于选中状态。该复选框被选中时，值为true，否则为false
方法：
Focus()，得到焦点；Blur()，失去焦点；Click()，单击该复选框
事件：
OnFocus=得到焦点执行的代码；OnBlur=失去焦点执行的代码；OnClick=单击该复选框执行的代码当提交表单时，假如复选框被选中，它的内部名称和值都会包含在表单结果中。否则，只有名称会被纳入表单结果中，值则为空白。
【示例】
&lt;input type="checkbox" value="A1" name="test"/>数学
&lt;input type="checkbox" value="A2" name="test"/>语文
&lt;input type="checkbox" value="A3" name="test"/>英语
&lt;input type="checkbox" value="A4" name="test"/>体育
          </pre>
        </p>
         <video src="../assets/h5实例视频/复选框.mp4" width="600px" controls></video>
          <img src="../assets/images/2.21.png" alt="">
        <p>图2.32  复选框实例</p>
        <p>
          <pre>
            5. 文本区域
在表单中添加文本区域可以接受站点访问者输入多于一行的文本。创建文本区域方法如下：
&lt;Textarea 属性=”值”…事件=”代码”...>初始值&lt;/Textarea>
文本区域的主要属性：
Name=滚动文本框控件名称；
Rows=控件的高度（以行为单位）；
Cols=控件的宽度（以字符为单位）；
ReadOnly：滚动文本框的内容不能被用户修改。
创建多行文本框时，在&lt;Textarea>和&lt;/Textarea>标记之间输入的文本将作为该控件的初始值。它的其他属性、方法和相关事件与单行文本框基本相同。当提交表单时，该域名称和内容都会包含在表单结果中。
6.下拉菜单
表单中的选项菜单可以让站点访问者从列表或菜单中选择选项。菜单中可以选择一个选项，也可以设置为允许许多重选择。 
【语法】
&lt;Select Name=”值” Size=”值” [Multiple]>
&lt;Option [Selected] Value=”值” >选项1&lt;/Option>
&lt;Option [Selected] Value=”值”>选项2&lt;/Option>
...
&lt;/Select>
属性：
Name=选项菜单控件名称；
Size=在列表中一次可以看到的选项数目（默认为1），若大于1则相当于列表框；
Multiple，允许作多项选择；
Selected=该选项的初始状态为选中。
当提交表单时，菜单的名称会被包含在表单结果中，并且其后又一份所有选项值的列表
【例2.23】一个关于课程的下拉菜单。
&lt;Html>
&lt;Head>
&lt;Title>文件域示例&lt;/Title>
&lt;/Head>
&lt;Body>
&lt;Form Action=”GetCourse.asp” Method=”post”>
&lt;Select Name=”课程”>
&lt;Option Value=”计算机基础”  Selected>计算机基础&lt;/Option>
&lt;Option Value=”C语言程序设计”  Selected>C语言程序设计&lt;/Option>
&lt;Option Value=”数据结构”  Selected>数据结构&lt;/Option>
&lt;Option Value=”数据库原理”  Selected>数据库原理&lt;/Option>
&lt;Option Value=”C++程序设计”  Selected>C++程序设计&lt;/Option>
&lt;/Select>
&lt;/Form>
&lt;/Body>
&lt;/Html>
          </pre>
        </p>
        <video src="../assets/h5实例视频/下拉菜单.mp4" width="600px" controls></video>
          <img src="../assets/images/2.22.png" alt="">
        <p>图2.32  下拉菜单实例</p>
        <p>
          <pre>
            7．文件域
文件域由一个文本框和一个“浏览”按钮组成，用户既可以在文本框中输入文件的路径和文件名，也可以通过单击“浏览”按钮从磁盘上查找和选择所需文件。文件域一般用于选择文件上载到服务器。创建文件域方法如下：
【语法】
&lt;Input Type=”file” 属性=”值”...>
文件域的主要属性：
Name=文件域的名称；
Value=初始文件名；
Size=文件名输入框的宽度
【例2.24】文件上传的例子。
&lt;Html>
&lt;Head>
&lt;Title>文件域示例&lt;/Title>
&lt;/Head>
&lt;Body>
&lt;Form Action=”GetCourse.asp” Method=”post” enctype=”multipart/form-data”>
&lt;Table Align=center BgColor=#D6D3CE Width=368>
&lt;Tr>
&lt;Th ColSpan=2 BgColor=#00034EF>
&lt;Font Color=#FFFFFF>文件域&lt;/Font>
&lt;/Th>
&lt;/Tr>
&lt;Tr>
&lt;Td Height=52 Align=right>请选择文件：&lt;/Td>
&lt;Td Height=52>&lt;Input Type=file Name=F1 Size=16>&lt;/Td>
&lt;/Tr >
&lt;Tr Align=center>
&lt;Td Height=52 Align=right>&lt;Input Type=submit Value=提交 Name=btnSubmit>&lt;/Td>
&lt;Td Height=52>&lt;Input Type=reset Value=全部重写 Name=btnReset>&lt;/Td>
&lt;/Tr>
&lt;/Table>
&lt;/Form>
&lt;/Body>
&lt;/Html>
为了能使服务器收到选择的文件，表单中应包含enctype属性值指定提交数据的格式。
一个文件域如图2-10所示。
          </pre>
        </p>
        <video src="../assets/h5实例视频/文件提交.mp4" width="600px" controls></video>
          <img  src="../assets/images/2.23.png" alt="">
        <p>图2-10 选择文件</p>
        <p>
          <pre>
            8．分组框
可以使用FieldSet标记对表单控件进行分组，从而将表单细分为更小、更易于管理的部分。
FieldSet标记必须以Legend标记开头，以指定控件组的标题，在Legend标记之后可以跟其他表单控件，也可以嵌套FieldSet。 
【语法】
&lt;FieldSet>
&lt;Legend>控件组标题&lt;/Legend>
组内表单控件
&lt;/FieldSet>
【例2.25】一个分组框的例子。
&lt;Html>
&lt;Head>
&lt;Title>文件域示例&lt;/Title>
&lt;/Head>
&lt;Body>
&lt;filedset >
&lt;legend>用户登录&lt;/legend>
&lt;form name="login.asp"  method="post">
账号：&lt;input name="UserName">&lt;/input>&lt;br>&lt;br>
密码：&lt;input type="password" name="UserPassword">&lt;/input>&lt;br>&lt;br>
&lt;input type="submit" value="登录" name="Submit">&lt;/input>
&lt;input type="reset" value="重填" name="Reset">&lt;/input>
&lt;/form>
&lt;/fieldset>
&lt;/Body>
&lt;/Html>显示效果如图2-11所示。
          </pre>
        </p>
        <img src="../assets/images/2.24.png" alt="">
        <p>图2-11分组框显示效果</p>
      </div>
      <div class="html1_3_3">
        <h2>1.3.3 获取表单数据</h2>
        <p>
          <pre>
            客户端提交数据后需要通过Request内置对象在服务端获取数据。 Request对象功能是从客户端得到数据，常用的三种取得数据的方法是：
(1)Request.Form.Get("username");
(2)Request.QueryString("username");
(3)Request["username"]。
其第三种是前两种的一个缩写，可以取代前两种情况。而前两种主要对应的Form提交时的两种不同的提交方法：分别是Post方法和Get方法。
即当表单中的method的值为Get时，在后台服务器中获取数据的方法可以为Request.QueryString("username")或Request["username"].
当method的值为Post时在后台服务器中获取数据的方法为Request.Form.Get("username")或Request["username"]。
     表单（form）提交的数据都需要控件的name，使用控件id提交后，将无法提取数据。
【例2.26】表单数据提交和提取例子。
表单数据提交页面：2.25.html。
&lt;form id="Form1" action="WebForm4.aspx" method="post">
    &lt;div style="text-align:center">填写用户信息
    &lt;hr style="size:50%"/>
     &lt;div style="text-align:left">
    用户名：&lt;input name="user_name" type="text" />&lt;br />
    密码： &lt;input name="Password1" type="password" />&lt;br />
    确认密码：&lt;input name="Password2" type="password" />&lt;br />
    性别：&lt;input name="sex" type="radio" value="女"  />女
         &lt;input name="sex"  type="radio" value="男" />男&lt;br />
    上传照片：&lt;input id="File1" type="file"  name="picture"/>&lt;br /> 
    &lt;input  type="submit" value="提交" />       
    &lt;input type="reset" value="重置" />
     &lt;/div>
&lt;/form>
在WebForm4.aspx页面的Page_Load事件下提取表单数据。 
protected void Page_Load(object sender, EventArgs e)  {
Response.Write("利用 Response对象获取客户端数据");
Response.Write("&lt;hr/>");
    string[] names = Request.Form.AllKeys;
        for (int i = 0; i &lt; names.Length; i++)       {        
string[] values = Request.Form.GetValues(i);
                for (int j = 0; j &lt; values.Length; j++)
                Response.Write(names[i] + "=" + values[j] + "&lt;br/>");
            }//通过循环表单中的键和键值，用 Response.Write输出
        }
          </pre>
        </p>
      </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>